<template>
    <div>
        <love-panel
                position="top"
                random_color="true"
                mid_icon="looks_one"
                mid_icon_color="#FFD700"

                right_icon="looks_3"
                right_icon_color="#ffab00"
                right_icon_size="9vh"

                left_icon="looks_two"
                left_icon_color="#607d8b"
                left_icon_size="12vh"

                :mid_text="first"
                :right_text="third"
                :left_text="second">
        </love-panel>
        <div class="rank-board">
            <div v-for="i in rank_info.length"
                 :key="i">
                <mu-alert :color="getTheme(i-1)">
                    <mu-icon left
                             :value="'filter_'+(i+3)"
                             color="white">
                    </mu-icon>
                    {{rank_info[i-1].nickname}}
                </mu-alert>
                <p class="gap"></p>
            </div>
        </div>
    </div>
</template>

<script>
    import LovePanel from "@/components/LovePanel"

    export default {
        name: "Rank",
        components: {
            LovePanel
        },
        data() {
            return {
                rank_bar_theme: [
                    'lime300',
                    'purple200',
                    'pink200',
                    'blue200',
                    'teal200',
                    'lightGreen200'
                ],
                rank_info: [],
                first: null,
                second: null,
                third: null,
                auto_id: null
            }
        },
        methods: {
            updateRank(auto = false) {
                this.$store.dispatch('getWorksList', {pageNum: 1, pageSize: 9, getWay: 'true'}).then(
                    (res) => {
                        this.rank_info = []
                        if (res.data.code === 0) {
                            for (let i = 0; i < res.data.data.length; i++) {
                                if (i < 3) {
                                    if (i === 0)
                                        this.first = res.data.data[i].nickname
                                    if (i === 1)
                                        this.second = res.data.data[i].nickname
                                    if (i === 2)
                                        this.third = res.data.data[i].nickname
                                    continue
                                }
                                this.rank_info.push(res.data.data[i])
                            }
                        } else {
                            if (!auto)
                                this.$toast.info({position: 'top', message: '请求排行数据失败!'})
                        }
                    }
                ).catch((e) => {
                    console.log(e)
                })
            },
            getTheme(i) {
                if (i < this.rank_bar_theme.length)
                    return this.rank_bar_theme[i]
                return this.rank_bar_theme[0]
            }
        },
        created() {
            this.$store.commit('updateTopTile', '排行榜')
            this.updateRank()
            this.auto_id = setInterval(() => {
                this.updateRank(true)
            }, 10000)
        },
        mounted() {
        },
        beforeDestroy() {
            clearInterval(this.auto_id)
        }
    }
</script>

<style lang="stylus" scoped>
    .rank-board
        position relative
        top 33vh
        z-index -999
        margin-bottom 10vh
</style>